<template>
	<view class="details">
		<view class="main" v-if="order_status == 1">
			<view class="state-text">
				<view class="text">等待买家付款</view>
				<view class="time">剩23小时45分自动关闭</view>
				<image src="/static/img/orderstate_1.png" />
			</view>
			<view class="address">
				<view class="site"><image src="/static/img/address1.png" /></view>
				<view class="text">
					<view class="nema">
						李雪琪
						<text class="right">123</text>
					</view>
					<view>收货地址：深圳市南山区永平路186号蓝色港湾大厦18号楼1901</view>
				</view>
			</view>
			<view class="cut-off"></view>
			<view class="commodity">
				<view class="shop">
					<image src="/static/img/logo2.png" />
					<view class="text">
						<view class="msg">
							<view class="name">专柜夏季新款圆领宽松时尚连衣裙LMISL 7276PC</view>
							<view class="message">
								<view class="price">￥3599.00</view>
								<view class="quantity">×1</view>
							</view>
						</view>
						<view class="trait">
							颜色分类：红色
							<text class="right">待付款</text>
						</view>
						<view class="trait">尺寸：S</view>
					</view>
				</view>
				<view class="cost">
					<view>
						商品总价
						<text class="right">￥3599.00</text>
					</view>
					<view>
						运费
						<text class="right">￥39.00</text>
					</view>
				</view>
				<view class="total">
					需付款
					<text class="right">￥3599.00</text>
				</view>
			</view>
			<view class="cut-off"></view>
			<view class="order-msg">
				<view class="title">订单信息</view>
				<view class="list">
					<text>订&nbsp;&nbsp;单&nbsp;&nbsp;号：</text>
					1005860039880
				</view>
				<view class="list">
					<text>下单时间：</text>
					2019-06-20 14:47:28
				</view>
			</view>
			<view class="cut-off"></view>
			<view class="order-msg">
				<view class="title">物流信息</view>
				<view class="list">
					<text>物流状态：</text>
					<text class="state">已签收</text>
					<!-- <text class="state">已发货</text>
        <text class="state">待发货</text> -->
				</view>
				<view class="list">
					<text>物流公司：</text>
					顺丰快运
				</view>
				<view class="list">
					<text>快递单号：</text>
					038522395600021
				</view>
			</view>
			<view class="relation">
				<image src="/static/img/service1.png" />
				联系客服
			</view>
			<view class="cut-off"></view>
			<view class="operation">
				<text>删除订单</text>
				<text class="r">去付款</text>
				<!-- <text>完成</text>
          <text>申请换货</text>
          <text>申请退款</text>
          <text>上传买家秀</text>  -->
			</view>
		</view>
		<view class="main" v-if="order_status == 2">
			<view class="state-text">
				<view class="text">等待商家处理换货申请</view>
				<view class="time">2019-06-24 16:24:56</view>
				<image src="/static/img/orderstate_2.png" />
			</view>
			<view class="tip">
				<view>若商家同意：换货申请达成，请您及时退货</view>
				<view>若商家拒绝：换货申请将关闭，您可联系商家协商</view>
			</view>
			<view class="cut-off"></view>
			<view class="commodity">
				<view class="shop">
					<image src="/static/img/logo2.png" />
					<view class="text">
						<view class="msg">
							<view class="name">专柜夏季新款圆领宽松时尚连衣裙LMISL 7276PC</view>
							<view class="message">
								<view class="price">￥3599.00</view>
								<view class="quantity">×1</view>
							</view>
						</view>
						<view class="trait">原有颜色分类：红T恤+红裤 尺寸：S</view>
						<view class="trait">换成颜色分类：黑色T恤+白色裤 尺寸：M</view>
					</view>
				</view>
			</view>
			<view class="relation">
				<image src="/static/img/service1.png" />
				联系客服
			</view>
			<view class="cut-off"></view>
			<view class="operation">
				<text>撤销换货</text>
				<text class="r">申请修改</text>
				<!-- <text>完成</text>
          <text>申请换货</text>
          <text>申请退款</text>
          <text>上传买家秀</text>  -->
			</view>
		</view>
		<view class="main" v-if="order_status == 3">
			<view class="state-text">
				<view class="text">等待买家付款</view>
				<view class="time">剩23小时45分自动关闭</view>
				<image src="/static/img/orderstate_3.png" />
			</view>
			<view class="address">
				<view class="site"><image src="/static/img/address1.png" /></view>
				<view class="text">
					<view class="nema">
						李雪琪
						<text class="right">123</text>
					</view>
					<view>收货地址：深圳市南山区永平路186号蓝色港湾大厦18号楼1901</view>
				</view>
			</view>
			<view class="cut-off"></view>
			<view class="commodity">
				<view class="shop">
					<image src="/static/img/logo2.png" />
					<view class="text">
						<view class="msg">
							<view class="name">专柜夏季新款圆领宽松时尚连衣裙LMISL 7276PC</view>
							<view class="message">
								<view class="price">￥3599.00</view>
								<view class="quantity">×1</view>
							</view>
						</view>
						<view class="trait">
							颜色分类：红色
							<text class="right">待付款</text>
						</view>
						<view class="trait">尺寸：S</view>
					</view>
				</view>
				<view class="cost">
					<view>
						商品总价
						<text class="right">￥3599.00</text>
					</view>
					<view>
						运费
						<text class="right">￥39.00</text>
					</view>
				</view>
				<view class="total">
					实付款
					<text class="right r">￥3599.00</text>
				</view>
			</view>
			<view class="cut-off"></view>
			<view class="order-msg">
				<view class="title">订单信息</view>
				<view class="list">
					<text>订&nbsp;&nbsp;单&nbsp;&nbsp;号：</text>
					1005860039880
				</view>
				<view class="list">
					<text>下单时间：</text>
					2019-06-20 14:47:28
				</view>
				<view class="list">
					<text>支付方式：</text>
					微信支付
				</view>
				<view class="list">
					<text>付款时间：</text>
					2019-06-24 16:24:56
				</view>
			</view>
			<view class="cut-off"></view>
			<view class="code">
				<view class="view-p">
					<text>订单识别码：</text>
					<image src="/static/img/logo2.png" />
				</view>
				<view class="view-p">
					<text>商品识别码：</text>
					<image src="/static/img/logo2.png" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_status: 3
		};
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.details {
	height: 100%;
	background: #fff;
	.main {
		// position: absolute;
		// top: 80rpx;
		// bottom: 0;
		// width: 100%;
		// overflow: auto;
	}
	.state-text {
		position: relative;
		background: #bd3c8c;
		color: #fff;
		padding: 73rpx 0 71rpx 66rpx;
		.text {
			font-size: 32rpx;
			margin-bottom: 32rpx;
		}
		.time {
			font-size: 24rpx;
		}
		image {
			position: absolute;
			right: 83rpx;
			top: 40rpx;
			width: 186rpx;
			height: 186rpx;
		}
	}
	.tip {
		line-height: 70rpx;
		padding: 20rpx 20rpx 20rpx 57rpx;
		font-size: 26rpx;
		p {
			position: relative;
			color: #999999;
		}
		p::after {
			content: '';
			position: absolute;
			left: -30rpx;
			top: 28rpx;
			width: 14rpx;
			height: 14rpx;
			border-radius: 50%;
			background: #999999;
		}
	}
	.address {
		position: relative;
		font-size: 26rpx;
		line-height: 48rpx;
		padding: 35rpx 20rpx 35rpx 132rpx;
		.site {
			position: absolute;
			left: 20rpx;
			top: 50%;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #bd3c8c;
			text-align: center;
			margin-right: 31rpx;
			transform: translate(0, -50%);
			image {
				width: 34rpx;
				height: 34rpx;
				position: relative;
				top: 20rpx;
			}
		}
		.text {
			flex: 1;
		}
	}
	.commodity {
		padding: 48rpx 0;
		.shop {
			padding: 0 20rpx;
			display: flex;
			font-size: 26rpx;
			line-height: 44rpx;
			image {
				width: 207rpx;
				height: auto;
				border-radius: 10rpx;
				margin-right: 28rpx;
			}
			.text {
				.msg {
					display: flex;
					.name {
						height: 90rpx;
						margin: 0 28rpx 35rpx 0;
					}
				}
				.trait {
					color: #999;
					font-size: 24rpx;
					.right {
						color: #bd3c8c;
					}
				}
			}
			.message {
				text-align: right;
			}
		}
		.cost {
			padding: 20rpx;
			color: #999;
			font-size: 26rpx;
			line-height: 60rpx;
		}
		.total {
			font-size: 30rpx;
			padding: 40rpx 20rpx 0;
			border-top: 1rpx solid #e1e1e1; /*no*/
			.r {
				color: #bd3c8c;
			}
		}
	}
	.order-msg {
		padding: 40rpx 20rpx;
		line-height: 60rpx;
		color: #999;
		.title {
			position: relative;
			color: #000;
			padding-left: 20rpx;
		}
		.title::after {
			position: absolute;
			content: '';
			display: block;
			width: 5rpx;
			height: 26rpx;
			left: 0;
			top: 17rpx;
			background: #bd3c8c;
		}
		.list{
			font-size: 36rpx;
		}
		.state {
			color: #bd3c8c;
		}
	}
	.relation {
		text-align: center;
		line-height: 115rpx;
		border-top: 1rpx solid #e1e1e1; /*no*/
		image {
			width: 51rpx;
			position: relative;
			top: 10rpx;
			margin-right: 23rpx;
		}
	}
	.operation {
		text-align: center;
		padding: 46rpx 0;
		text {
			display: inline-block;
			width: 200rpx;
			border: 1px solid #e1e1e1; /*no*/
			border-radius: 35rpx;
			line-height: 70rpx;
			margin: 0 45rpx;
		}
		text.r {
			border-color: #bd3c8c;
			color: #bd3c8c;
		}
	}
	.code {
		padding: 0 20rpx 50rpx;
		.view-p {
			margin-top: 67rpx;
			text {
				float: left;
			}
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
}
</style>
